.sidebar {
  top: 0;
  width: var(--sidebar-width);
  height: var(--full-height);
  background-color: #ededed;
}

.action-button {
  display: inline-flex;
  margin-top: 3px;
  margin-left: 5px;
}

.action-button svg {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.action-button:hover svg {
  opacity: 1;
}


@mixin sidebar-active {
  background-color: #eff6fc;
  outline: #deecf9 1px solid;
  outline-offset: 0;
  border-radius: 8px;
}

.sidebar-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px auto;

  &:first-child {
    margin-top: 85px; /* 第一个元素离顶部更远 */
  }

  &:hover {
    @include sidebar-active();
  }
}



.sidebar-header {
  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-chat {
  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-role {
  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-active {
  @include sidebar-active();
}

